<template>
<div class="avatar-box">
  <el-dropdown>

    <el-avatar
        :src="userInfo.userAvatar"
        :size="49"
    />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="updateUserInfoFlag = true">修改信息</el-dropdown-item>
        <el-dropdown-item @click="updateUserPasswordFlg = true">修改密码</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided @click="toLogout">退出系统</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!--修改用户信息-->
  <el-dialog v-model="updateUserInfoFlag" title="修改用户信息">
    <!--头像-->
    <el-upload
    class="avatar-uploader"
    :action="avatarUploadUrl"
    :headers="uploadAvatarHeaders"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="userInfo.userAvatar" :src="userInfo.userAvatar" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>

    <el-form :model="userInfo">
      <el-form-item label="账号:" :label-width="formLabelWidth">
        <el-input v-model="userInfo.userAccount" disabled placeholder="Please input" />
      </el-form-item>
      <el-form-item label="昵称:" :label-width="formLabelWidth">
        <el-input v-model="userInfo.userNikename" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱:" :label-width="formLabelWidth">
        <el-input v-model="userInfo.userEmail" autocomplete="off" />
      </el-form-item>
      <el-form-item label="关联账号:" :label-width="formLabelWidth">
        <el-input v-model="userInfo.userToaccount" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateUserInfoFlag = false">关闭</el-button>
        <el-button type="primary" @click="toUpdateUserInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--修改用户密码-->
  <el-dialog v-model="updateUserPasswordFlg" title="修改密码">
    <el-form>
      <el-form-item label="旧密码:" :label-width="formLabelWidth">
        <el-input v-model="oldPassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码:" :label-width="formLabelWidth">
        <el-input v-model="newPassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认新密码:" :label-width="formLabelWidth">
        <el-input v-model="reNewPassword" type="password" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateUserPasswordFlg = false">取消</el-button>
        <el-button type="primary" @click="toUpdateUserPassword">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


</div>
</template>

<script>
import {getUserInfo, updateUserInfo, updatePassword} from "@/request/api/user";
import {logout} from "@/request/api/login";
import {TOKEN, REQUESTURL} from "@/common/constants";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: "UserAvatarComponent",
  data() {
    // 修改用户信息窗口
    const updateUserInfoFlag = false;
    // 修改用户密码窗口
    const updateUserPasswordFlg = false;
    // 设置弹窗的宽
    const formLabelWidth = '140px';
    // 用户信息
    const userInfo = {
      userAccount: '',
      userNikename: '',
      userAvatar: '',
      userEmail: '',
      userToaccount: '',
    }
    const oldPassword = '';
    const newPassword = '';
    const reNewPassword = '';
    const avatarUploadUrl = REQUESTURL + '/user/updateAvatar';
    const uploadAvatarHeaders = {
      token: localStorage.getItem(TOKEN)
    }
    return {
      userInfo,
      updateUserInfoFlag,
      formLabelWidth,
      updateUserPasswordFlg,
      oldPassword,
      newPassword,
      reNewPassword,
      avatarUploadUrl,
      uploadAvatarHeaders
    }
  },
  created() {
    // 获取到登陆用户的信息
    getUserInfo().then(res => {
      this.userInfo = res.data
    })
  },
  methods: {
    toLogout() {
      // 发送登出请求
      logout().then(res => {
        console.log(res.data)
        // 移除 token
        localStorage.removeItem(TOKEN);
      })
      // 跳转到登陆页面
      router.push('/login')
    },
    toUpdateUserInfo() {
      let nickname = this.userInfo.userNikename;
      let email = this.userInfo.userEmail;
      let toAccount = this.userInfo.userToaccount;
      // 验证输入的信息是否为空
      if (!nickname || !toAccount || !email) {
        ElMessage.error('修改的信息不能为空');
        return;
      }
      // 邮箱验证
      if (email.search(/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/)) {
        ElMessage.warning('请输入正确的邮箱')
        return;
      }
      updateUserInfo(nickname, email, toAccount).then(res => {
        ElMessage.success(res.data);
        this.updateUserInfoFlag = false;
      })
    },
    // 修改密码
    toUpdateUserPassword() {
      let oldPassword = this.oldPassword;
      let newPassword = this.newPassword;
      let reNewPassword = this.reNewPassword;
      if (
          oldPassword.length < 6 || oldPassword.length >16 ||
          newPassword.length < 6 || newPassword.length > 16 ||
          reNewPassword.length < 6 || reNewPassword.length > 16
      ) {
        ElMessage.warning('密码的长度在 6 - 16 之间');
        return;
      }
      if (newPassword !== reNewPassword) {
        ElMessage.warning('新旧密码不相同')
        return;
      }
      updatePassword(oldPassword, newPassword).then(res => {
        ElMessage.success(res.data);
        this.updateUserPasswordFlg = false;
      })
    },
    beforeAvatarUpload(rawFile) {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    },
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.userInfo.userAvatar = res.data;
        ElMessage.success('头像修改成功')
        // this.updateUserInfoFlag = false;
      } else {
        ElMessage.error(res.data)
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  margin-left: 215px;
}
</style>

<style lang="scss" scoped>
.avatar-box {
  height: 50px;
}

</style>